<template>
  <el-dialog v-model="isShowDialog"
             :before-close="handleClose"
             title="添加商量列表"
             draggable
             width="60%"
             append-to-body
  >

    <el-form :inline="true" :model="queryParams" label-width="100px">
      <div style="display: flex;flex-wrap: wrap">

        <el-col :span="6">
          <el-form-item label="SKU编码">
            <el-input v-model="queryParams.skuCode" placeholder="SKU编码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品名称">
            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>

    <vxe-table
        ref="tableRef"
        border
        align="center"
        :data="tableList"
        height="300"
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox"  width="80" ></vxe-column>
      <vxe-column type="seq" width="80" title="序号"  ></vxe-column>
      <vxe-column field="skuCode" title="SKU编号"></vxe-column>
      <vxe-column field="skuName" title="商品名称"></vxe-column>
      <vxe-column field="coverUrl" width="180" title="关联商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl"></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="avlNum" title="可用数量"></vxe-column>
    </vxe-table>

    <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSearch"> 确定 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
    </template>

  </el-dialog>

</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {getErpReturnList, saveAndCommitErpReturn} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";

const {proxy} = getCurrentInstance();
let queryParams=ref({})
const total = ref(0)

let saveParams = ref({})

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
})

const emits = defineEmits(['cancel'])

function handleClose() {
  emits('cancel')
}

let tableList=ref([])

function getList(){
  // if(!queryParams.value.skuCode && !queryParams.value.skuName){
  //   proxy.$modal.msgWarning("请先输入查询条件!")
  //   return
  // }
  let params={
    param: queryParams.value
  }
  getErpReturnList(params).then(res=>{
    if(res.code===200){
      tableList.value =res.data
      total.value =res.total
    }
  })
}

const resetQuery = () => {
  queryParams.value={
    pageNum: 1,
    pageSize: 10,
  }
  tableList.value=[]
};

function clickSearch(){
  let selRow = proxy.$refs.tableRef.getCheckboxRecords()
  if (selRow.length===0) {
    proxy.$modal.msgWarning("请先选择商品!")
  }
  saveAndCommitErpReturn(selRow).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("保存成功！")
      emits('cancel',true)
    }
  })
}

</script>

<style scoped lang="scss">

</style>